<template>
	<view class="container">
		<!-- 顶部标题栏 -->
		<view class="header">
			<text class="title">司机列表</text>
			<text class="subtitle">当前共有 {{ userList.length }} 位司机</text>
		</view>

		<!-- 司机列表 -->
		<uni-list class="driver-list">
			<uni-list-item v-for="(item, index) in userList" :key="item._id" clickable @click="onclick(item._id)">
				<template v-slot:header>
					<view class="avatar">
						<image :src="item.avatar || '/static/avatar/empty.png'" class="user-avatar"></image>
					</view>
				</template>

				<template v-slot:body>
					<view class="driver-row">
						<!-- 姓名 + 状态 -->
						<view class="info">
							<view class="name-status">
								<text class="name">{{ item.name || '未知' }}</text>
								<view class="status-badge" :class="'status-' + item.status">
									<text>{{ status[item.status] || '未知' }}</text>
								</view>
							</view>
						</view>

						<!-- 电话 -->
						<view class="contact">
							<uni-icons type="phone" size="16" color="#4a90e2"></uni-icons>
							<text class="mobile">{{ item.mobile }}</text>
						</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>

		<!-- 浮动操作按钮 -->
		<uni-fab ref="fab" :pattern="pattern" direction="horizontal" :content="content" horizontal="right"
			vertical="top" @trigger="trigger" class="fab-button" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: {
					0: '空闲',
					1: '出车',
					2: '车辆故障',
					3: '留置点',
					4: '请假'
				},
				userList: [],
				pattern: {
					icon: "plus"
				},
				content: [{
						iconPath: '/static/tarbar/user.png',
						text: '新增'
					},
					{
						iconPath: '/static/icon/fuel.png',
						text: '加油'
					}
				]
			};
		},
		mounted() {
			this.getdriver();
		},
		methods: {
			onclick(e) {
				uni.$router.to({
					url: 'pagesA/driver/edit',
					params: {
						_id: e
					}
				});
			},
			trigger(e) {
				switch (e.index) {
					case 0:
						uni.$router.to('pagesA/driver/add');
						break;
					case 1:
						uni.$router.to('pagesA/driver/fuel/fuel');
						break;
				}
			},
			getdriver() {
				const obj = uniCloud.importObject('driver');
				obj.getDriverList({}).then(res => {
					if (res.code === 0) {
						this.userList = res.data;
					} else {
						uni.showToast({
							title: '数据异常'
						});
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f5f9ff;
		padding: 20rpx;
	}

	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}

	.header {
		padding: 30rpx 20rpx;
		margin-bottom: 20rpx;

		.title {
			font-size: 38rpx;
			font-weight: bold;
			color: #1a3a7e;
			display: block;
			margin-bottom: 10rpx;
		}

		.subtitle {
			font-size: 26rpx;
			color: #7a92c0;
		}
	}

	.driver-list {
		background: transparent !important;

		::deep .uni-list-item__container {
			padding: 24rpx 30rpx !important;
			background: #ffffff !important;
		}

		::deep .uni-list-item__content {
			display: flex;
			align-items: center;
		}

		::deep .uni-list-item__extra {
			width: auto !important;
		}
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;

		.user-avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background-color: #f0f7ff;
		}
	}

	.driver-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.info {
		flex: 1;
		min-width: 0;
		margin-right: 20rpx;
	}

	.name-status {
		display: flex;
		align-items: center;
		gap: 16rpx; // 姓名和状态之间的间距
	}

	.name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 180rpx;
	}

	.status-badge {
		padding: 6rpx 16rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
		color: #fff;

		&.status-0 {
			background: #4cd964;
		}

		&.status-1 {
			background: #007aff;
		}

		&.status-2 {
			background: #ff9500;
		}

		&.status-3 {
			background: #808080;
		}

		&.status-4 {
			background: #ff5500;
		}
	}

	.contact {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-shrink: 0;
	}

	.mobile {
		color: #7a92c0;
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.fab-button {
		::deep .uni-fab__button {
			box-shadow: 0 6rpx 16rpx rgba(74, 144, 226, 0.4);
		}
	}
</style>